<template>
  <view>
    <u-popup v-model="show" :mask-close-able="true" mode="bottom" height="auto">
      <view class="my_addcart">
        <view class="border_bottom is_add">
          <view class="flex flex_row_between flex_col_center">
            <view class="flex">
              <image
                class="good_image"
                :src="data.img"
                mode="aspectFit"
              ></image>
              <view class="price flex">
                <!-- <view v-if="canshowprice" class="red_font bold">
								￥{{showPrice}}/{{unit}}
							</view> -->
                <text
                  class="red_font bold"
                  v-if="canshowprice && current_price == 1"
                  >{{ showPrice }}</text
                >
                <text class="red_font bold" v-else-if="canshowprice"
                  >{{ showPrice }}/{{ unit }}</text
                >
                <text class="bold" style="font-size: 26rpx">{{
                  data.name
                }}</text>
              </view>
            </view>

            <my-stepper
              :val="willBuyNum"
              :min="min"
              :limit="limit"
              :inventory="max"
              @plus="addAction"
              @minus="subAction"
              @showKey="
                $refs.keyboard.open(data.is_standard, 0, min, max, limit)
              "
            >
            </my-stepper>
          </view>
          <view class="total gray_font text_right" style="font-size: 24rpx">
            <text v-if="min > 0">起订量：{{ min }}</text>
            <text v-if="limit > 0">库存：{{ max }}</text>
          </view>
          <view class="gray_font" style="font-size: 24rpx">{{
            desc || ""
          }}</view>
        </view>
        <view class="select_ware flex flex_row_between">
          <view class="flex">
            <view style="text-align: center; white-space: nowrap">规格：</view>
            <view style="display: flex; flex-wrap: wrap">
              <text
                v-for="(item, index) in data.spu"
                :key="index"
                class="spec"
                :class="{ active: checked == index }"
                @click="changeSpe(index)"
                >{{ item.spu_name }}</text
              >
            </view>
          </view>
        </view>
        <view class="determine_button">
          <view class="determine" @click="addToCart">确定</view>
        </view>
      </view>
    </u-popup>

    <my-keyboard @confirm="inputPrice" ref="keyboard"></my-keyboard>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  props: {
    canshowprice: {
      default: true,
    },
  },
  data() {
    return {
      show: false,
      data: {},
      checked: 0,
      spuId: null, //规格id
      showPrice: 0,
      unit: "",
      min: 0,
      max: 0,
      willBuyNum: 0,
      limit: null, //是否无限量供应，1有限制，会显示剩余库存
      desc: "", //描述
      current_price: null, //1时价
    };
  },
  methods: {
    open(data) {
      this.checked = 0;
      this.show = true;
      this.data = data;
      this.showPrice = this.data.spu[0].current_price
        ? "时价"
        : `￥${this.data.spu[0].market_price}`;
      this.showPrice = this.data.spu[0].activity_price || this.showPrice;
      if (data.isJF) {
        this.showPrice = `${this.data.spu[0].market_price}积分`;
      }
      this.unit = data.spu[0].unit;
      this.spuId = data.spu[0].id;
      this.min = data.spu[0].minimum;
      this.max = data.spu[0].inventory_hd || data.spu[0].inventory_left;
      this.limit = data.spu[0].inventory_hd
        ? 1
        : data.spu[0].designated_inventory;
      this.willBuyNum = data.spu[0].cart_num ? data.spu[0].cart_num : this.min;
      this.desc = data.spu[0].describe;
      this.current_price = this.data.spu[0].current_price;
    },
    //选择规格
    changeSpe(index) {
      this.checked = index;
      this.spuId = this.data.spu[index].id;
      this.min = this.data.spu[index].minimum;
      this.max =
        this.data.spu[index].inventory_hd ||
        this.data.spu[index].inventory_left;
      this.limit = this.data.spu[index].inventory_hd
        ? 1
        : this.data.spu[index].designated_inventory;
      this.showPrice = this.data.spu[index].current_price
        ? "时价"
        : `￥${this.data.spu[index].market_price}`;
      this.showPrice = this.data.spu[index].activity_price || this.showPrice;
      this.unit = this.data.spu[index].unit;
      this.willBuyNum = this.data.spu[index].cart_num
        ? this.data.spu[index].cart_num
        : this.min;
      this.desc = this.data.spu[index].describe;
      this.current_price = this.data.spu[index].current_price;
    },
    //＋
    addAction(data) {
      var val = data.value;
      let min = Number(this.min),
        max = Number(this.max);
      if (val < min) {
        val = min;
      } else if (Number(this.limit) > 0 && val + 1 >= Number(max)) {
        //不能超过库存量
        val = max;
        uni.showToast({
          icon: "none",
          title: "库存不足",
        });
      } else {
        val++;
      }
      this.willBuyNum = Number(val.toFixed(2));
    },
    //-
    subAction(data) {
      var val = data.value;

      if (val - 1 < this.min) {
        val = 0;
      } else {
        val--;
      }
      this.willBuyNum = Number(val.toFixed(2));
    },
    //输入数量
    inputPrice(data) {
      this.willBuyNum = Number(data.value).toFixed(2);
    },
    addToCart() {
      if (this.willBuyNum > 0) {
        // this.$emit('addtocart',this.data.id,this.spuId,this.willBuyNum,)
        var options = {
          goods_id: this.data.id,
          spu_id: this.spuId,
          num: this.willBuyNum,
        };
        $https("POST", "changeCart", options, (res) => {
          if (res.data.errcode == 0) {
            this.data.willBuyNum = res.data.data.num_cart_count;
            this.$emit("tabBarTag", res.data.data.all_cart_num);
            this.show = false;
            uni.showToast({
              title: "添加成功",
              icon: "none",
            });
          } else {
            uni.showToast({
              title: res.data.errmsg,
              icon: "none",
            });
          }
        });
      } else {
        uni.showToast({
          title: "请选择数量",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.u-drawer {
  overflow: unset;
}

.my_addcart {
  padding: 36rpx 24rpx 0;
  background-color: $white;

  .total {
    > text {
      margin-left: 30rpx;
    }
  }

  .determine_button,
  .ware {
    padding: 30rpx 0;
  }

  .select_ware {
    margin: 32rpx 0;

    // text {
    // 	padding: 0 10rpx;
    // }

    .spec {
      min-width: 100rpx;
      padding: 6rpx 20rpx;
      font-size: 24rpx;
      text-align: center;
    }
  }

  .active {
    background: $dgreen;
    color: white;
  }

  .price {
    flex-direction: column;
    justify-content: center;
    margin-left: 42rpx;
  }

  .select_ware text {
    margin-right: 20rpx;
  }

  .determine {
    width: 444rpx;
    margin: 0 auto;
    text-align: center;
    background: $dgreen;
    color: $white;
    border-radius: 36rpx;
    height: 72rpx;
    line-height: 72rpx;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }
}

.my_addcart .good_image {
  width: 132rpx;
  height: 132rpx;
}

.my_addcart {
  .is_add {
    padding-bottom: 36rpx;
  }

  .active {
    border-radius: 50rpx;
    padding: 0rpx 20rpx;
  }
}
</style>
